<template>
	<view class="page" :style="{'background': bgColor[themeCounter%4], 'color': fontColor[themeCounter%4]}">
		<view class="card">
			<view class="h1 title">{{banner.title}}</view>
			<view class="user-title">
				<image class="avatar" :src="banner.avatar"></image>
				<view class="detail">
					<text class="name">{{banner.uname}}</text>
					<view class="info">
						<view class="timestamp">{{banner.createTime}}  看过</view>
						<rating :count="banner.ratingValue * 2 || 0" />
					</view>
				</view>
			</view>
			<view>
				<parser :html="content" @parser="parser" @ready="ready" @imgtap="imgtap" @linkpress="linkpress" @error="error"
				 show-with-animation lazy-load :autocopy="false"></parser>
				 <!-- <rich-text style="line-height: 48rpx;" :nodes="content"></rich-text> -->
			</view>
			<view v-if="content" class="copyright-notice">
				©本文版权归 {{banner.uname}} 所有, 任何形式转载请联系作者。
			</view>
			<view v-if="content" class="vote-btn-group">
				<view class="btn useful">{{banner.votes.useful_count || 0}} 有用</view>
				<view class="btn useless">{{banner.votes.useless_count || 0}} 没用</view>
			</view>
		</view>
		<w-loading text=" " mask="true" click="false" ref="loading"></w-loading>
	</view>
</template>

<script>
	import rating from "@/components/uni-rating-start/uni-rating-start.vue"
	import parser from "@/components/jyf-Parser/index"
	let api = require("@/utils/api.js")
	
	export default {
		data() {
			return {
				banner: {id: -1},
				content: '',
				bgColor: ['#FFFFFF','#EAEAEF', '#787887', '#171717'],
				fontColor: ['black', 'black', '#bdc3c7', '#D6D6D6'],       
				themeCounter: 0,
			}
		},
		components: {rating, parser},
		onLoad(event) {
			if(event && event.query){
				try {
					this.banner = JSON.parse(decodeURIComponent(event.query));
					this.banner.avatar = decodeURIComponent(this.banner.avatar)
				} catch (error) {
					console.error(error)
					this.banner = JSON.parse(event.query);
				}
			}
			this.themeCounter = uni.getStorageSync('themeCounter') || 0;
			this.getDetail(this.banner.id || 1000104);
		},
		onShareAppMessage() {
			var param = {id: this.banner.id, title: this.banner.title, ratingValue: this.banner.ratingValue, color: this.banner.headerBgColor,
				createTime: this.banner.createTime, uid: this.banner.uid, uname: this.banner.uname, avatar: encodeURIComponent(this.banner.avatar)};
			console.log(param)
			return {
				title: '涨知识-书评',
				path: '/pages/book/detail/review?query=' + encodeURIComponent(JSON.stringify(param))
			}
		},
		methods: {
			getDetail(id) {
				var that = this;
				this.$refs.loading.open();
				uni.request({
					url: api.db_book_review_detail + id,
					success: (res) => {
						if (res.statusCode == 200 && res.data.status == 'ok') {
							if(!res.data || !res.data.data){
								that.showNoDataErr = true;
								return;
							}
							var data = res.data.data;
							data.html = data.html.replace(/\<img/gi, '<img style="width:100%;height:auto"');
							data.html = data.html.replace(/(<!--.*?-->)/g, '')
							//data.html = data.html.replace(/<br>/g, '<br><br>')
							data.html = data.html.replace(/\n/g, '<br>')
							data.html = data.html.replace(/　　/g, '&nbsp;&nbsp;&nbsp;&nbsp;')
							that.content = data.html;
							
							that.banner.votes = that.getJSONByStr(data.votes, {})
						} else {
							that.showNoDataErr = true;
							return;
						}
					},
					complete: ()=>{
						uni.stopPullDownRefresh();
						this.$refs.loading.close();
					}
				});
			},
			onPullDownRefresh() {
				this.getDetail(this.banner.id);
				this.themeCounter++;
				uni.setStorageSync('themeCounter', this.themeCounter)
			},
			parser(res) {
				console.log("parse finish", res);
			},
			ready(res) {
				console.log("ready", res);
			},
			imgtap(res) {
				console.log("imgtap", res);
			},
			linkpress(res) {
				console.log("linkpress", res);
				// #ifdef APP-PLUS
				if (/http/.test(res.href))
					uni.navigateTo({
						url: '../web/web?src=' + res.href
					})
				// #endif
				uni.setClipboardData({
				    data: res.href,
				    success: function () {
				        uni.showToast({title: '链接已复制', duration: 1000})
				    }
				});
			},
			error(res) {
				console.error(res);
			},
			getJSONByStr(str, defaultVal){
				try {
					return JSON.parse(str);
				} catch (error) {
					console.log(error)
				}
				return defaultVal;
			}
		}
	}
</script>

<style>
.page {
	min-height: 100%;
}
page{
  height: 100%;
}
.card {
	padding: 100rpx 36rpx 0rpx;
}
.title {
    overflow: hidden;
    margin-bottom: 30rpx;
    font-weight: bold;
}
.h1 {
    padding: 40rpx 0 10rpx;
    font-size: 48rpx;
    line-height: 64rpx;
    word-break: break-all;
}
.user-title {
    display: -webkit-box;
    display: box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: start;
    box-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 40rpx;
}
.user-title .avatar {
    border-radius: 50%;
    width: 60rpx;
    height: 60rpx;
    margin-right: 20rpx;
}
.user-title .detail {
    -webkit-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
.user-title .detail .name {
    font-size: 26rpx;
    font-weight: 600;
    line-height: 1;
    margin-top: 8rpx;
    display: block;
}
.user-title .detail .info {
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	line-height: 1;
	font-size: 30rpx;
}
.user-title .detail .info .timestamp {
    font-size: 22rpx;
    margin-bottom: -2rpx;
    margin-right: 26rpx;
}
.p {
	line-height: 55rpx;
}
view{
	line-height: 55rpx;
}
.copyright-notice {
    font-size: 30rpx;
    color: #aaa;
    margin: 30rpx 0;
    line-height: 1.2;
    text-align: justify;
    padding-top: 32rpx;
    margin-top: 60rpx!important;
    position: relative;
}
.copyright-notice::before {
    content: '';
    display: block;
    border-top: 2rpx solid rgba(0,0,0,0.08);
    width: 120rpx;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
}
.vote-btn-group {
    text-align: center;
	display: flex;
	-webkit-box-pack: center;
	justify-content: center;
	padding-bottom: 40rpx;
}
.vote-btn-group .btn.useful {
    border-top-left-radius: 35rpx;
    border-bottom-left-radius: 35rpx;
    border-right: none;
}
.vote-btn-group .btn.useless {
    border-top-right-radius: 35rpx;
    border-bottom-right-radius: 35rpx;
}
.vote-btn-group .btn {
    display: block;
    border: 1rpx solid #aaa;
    padding: 16rpx 40rpx;
    font-weight: bold;
    font-size: 26rpx;
    color: #aaa;
    line-height: 1.4;
}
</style>
